<template>
	<view
		:class="{ '[border-bottom:1px_solid_theme(colors.gray.200)]': bordered }"
		class="flex justify-between items-center p-4 text-gray-500"
		hover-class="bg-gray-100"
		:hover-start-time="0"
		:hover-stay-time="100"
	>
		<view class="flex items-center gap-2">
			<uni-icons :type="icon" class="text-primary" color="theme(colors.primary)" size="22" />
			<view>{{ text }}</view>
		</view>
		<view class="flex items-center gap-2">
			<view v-if="typeof count === 'number'" class="text-[24rpx]">{{ count }}</view>
			<uni-icons type="right" />
		</view>
	</view>
</template>

<script setup>
	defineProps({
		text: { type: String, default: 'xxxx' },
		icon: { type: String, required: true },
		count: { type: Number, default: null },
		bordered: { type: Boolean, default: true }
	})
</script>
